<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>Visualization using JavaScript(SVG and Canvas)</title>

<script src="../static/js/tongji.js"></script>
<link rel="stylesheet" href="../static/css/main.css" />
<script src='../static/js/main.js'></script>
</head>


<body>
<h1>专题：JavaScript画paper中常见的图</h1>
<p class=QQ>生物信息与R语言QQ群: 187923577</p>

<ul>
	<b>目录 Contents：</b>
	<li><a href='#t1'>1. 桑基图Sankey diagram</a><li>
	
	
	<li><a href='#tn'>n. xx图 todo</a><li>
</ul>






<b>Figure and Code, mainly in SVG and canvas</b>
<p><b>Tips: 刷新代码颜色随机。</b></p>

<p>
1. 本页面最底部有生信QQ群号，欢迎加入讨论，严禁广告。
</p>






<a name='t1'></a>
<h2>1. 桑基图Sankey diagram</h2>
<p><a target="_blank" href='https://www.zhihu.com/question/45502919'>桑基图</a>适合展示状态的变化，展示变动的方向和比例。桑基图还有个的特征是，流出端和流入端的数据一般都是相等的，即分支宽度总和相等，就像能量守恒定律一样。不仅仅是流向的数据，只要是具有层级的分类数据，都可以用桑基图来展现</p>
<img src="images/001_sangkey.png">
<br>
点击查看<a target="_blank" href='sankey/index.html'>demo with code</a>
<pre>
// 代码详见上一行demo

//(1)R产生json的代码
xx=data.frame(
  'from'=c('cd4', 'cd8', 'cd4', 'cd8'),
  'to'=c('Treg', 'Treg', 'Tem', 'Tem'),
  'flow'=c(11, 20, 30, 40)
)
xx
jsonlite::toJSON(xx)
// [{"from":"cd4","to":"Treg","flow":11},{"from":"cd8","to":"Treg","flow":20},{"from":"cd4","to":"Tem","flow":30},{"from":"cd8","to":"Tem","flow":40}] 

(2) js 转obj为array
var dt=[{"from":"cd4","to":"Treg","flow":11},{"from":"cd8","to":"Treg","flow":20},{"from":"cd4","to":"Tem","flow":30},{"from":"cd8","to":"Tem","flow":40}] 
arr=[]
for(i in dt){
	var o=dt[i]
	arr.push([o.from, o.to, o.flow])
}
arr
/*
0: (3) ["cd4", "Treg", 11]
1: (3) ["cd8", "Treg", 20]
2: (3) ["cd4", "Tem", 30]
3: (3) ["cd8", "Tem", 40]
*/
</pre>















<a name='tn'></a>
<h2>n. xx图 todo</h2>
<p></p>

















<hr>
<p class=light>欢迎互相切磋，共同进步: 秋秋号 314649593, 请备注大名、来意。<br>
秋秋群: 生物信息与R语言 187923577 禁止营销活动，否则飞机票。<br>
bioToolKit is part of 生物慕课网 www.biomooc.com
</p>




<div id="GoTop"><a href="javascript:void(0)" onclick="gotop()">GoTop</a></div>
<script>
var gotop=function(){
	window.scroll(0,0);
}
</script>
</body>
</html>